<template>
	<view class="own-collection">
		<view class="table-items">
			<view class="" @tap="onClickTable('shop')">
				商品
			</view>
			<view class="" @tap="onClickTable('article')">
				文章
			</view>
		</view>
		<view class="">
			<shop-item-list v-if="selected === 'shop'" :shopItems="shopItems" @clickItem="onClickShopItem"></shop-item-list>
			<article-list v-if="selected === 'article'" :articleItems="articleItems" @onClickItem="onClickArticleItem"></article-list>
		</view>
	</view>
</template>

<script>
	import shopItemList from 'components/templates/shop-item-list.vue'
	import articleList from "components/templates/article-list.vue";

	export default {
		components: {
			shopItemList,
			articleList
		},
		data() {
			return {
				"selected": "shop",
				"shopItems": [{
					"id": 1,
					"img": "../../static/img/index1/u33.png",
					"title": "「鹿语」黄铜印章 | 君子之风，雅致之礼 手工器物，古法铸造",
					"price": "288"
				}, {
					"id": 2,
					"img": "../../static/img/index1/u40.jpg",
					"title": "溯芳斋曜变大师陆金喜柴烧押窑",
					"price": "1588"
				}, {
					"id": 3,
					"img": "../../static/img/index1/u36.jpg",
					"title": "顾景舟【洋桶】紫砂壶怀旧复刻",
					"price": "1280"
				}, {
					"id": 4,
					"img": "../../static/img/index1/u44.jpg",
					"title": "福聚号—原创鲁青釉半球形茶壶",
					"price": "168"
				}],
				articleItems: [{
						id: 123,
						iconURL: "/static/img/index1/u86.png",
						name: "诗悦",
						className: "- 随笔 -",
						tag: "# 春日絮语 #",
						content: "金石不言自有声。是以，我们给这枚安静的小鹿印章取名「鹿语」。在「鹿语」推出之时，我们最想说的是一声感谢。感谢朋友们再三敦促，让我们积攒起动力，推出此单品。也感谢朋友们耐心等待，你们在屏幕另一端敲下的文字，字字句句都是暖心的鼓励。",
						imgs: [
							"/static/img/index1/u128.jpg",
							"/static/img/index1/u129.jpg",
							"/static/img/index1/u130.jpg",
							"/static/img/index1/u131.jpg",
						],
						ts: "刚刚",
						pinglun: 12,
						like: "35"
					},
					{
						id: 123,
						iconURL: "/static/img/index1/u86.png",
						name: "诗悦",
						className: "- 笔记 -",
						tag: "",
						content: "面朝大海，春暖花开。大海的深邃、青瓷的温润、茶汤的甘醇，悠然的情怀都在里头， 愿以如此纯粹的方式，融入您的生活，与您长情相伴。",
						imgs: [
							"/static/img/index1/u90.png",
							"/static/img/index1/u91.png",
						],
						imgURL: "",
						ts: "1小时前",
						pinglun: 12,
						like: "35"
					},
					{
						id: 123,
						iconURL: "/static/img/index1/u112.png",
						name: "乔子翎",
						className: "- 新诗 -",
						title: "夜合花·庐州思",
						tag: "",
						content: "昨夜诗成，酒酣凭醉，睡中一梦庐州。吴门久客，怯将软语藏收。不登古津楼。怕为乡人误为游。唱黄梅调，余音未了，水已推舟。 离家已隔三秋。见亲朋，却如云月含羞。心中脉脉，无言总被人偷。往事问还休。点穿泪囊落东流。纵归来晚，依稀记得，那日回眸。",
						imgs: [
							"",
							"",
							""
						],
						imgURL: "/static/img/index1/u114.jpg",
						ts: "昨天",
						pinglun: 12,
						like: "35"
					}
				]
			}
		},
		methods: {
			onClickShopItem(item) {
				// console.log(item);
				uni.navigateTo({
					url: "/pages/home/product-detail" + "?id=" + item.id
				})
			},
			onClickArticleItem(item) {
				// console.log(item);
				uni.navigateTo({
					url: "/pages/article/article-detail?id=" + item.id
				})
			},
			onClickTable(table){
				this.selected = table;
			}
		}

	}
</script>

<style lang="scss">
	.own-collection {
		width: 100%;

		.table-items {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;

			text-align: center;
			color: #666666;

			// border: 1px solid red;

			view {
				height: 51px;
				display: flex;
				flex-direction: row;
				text-align: center;
				align-items: center;
				border: 1px solid rgba(242, 242, 242, 1);
				width: 100%;
				justify-content: space-around;
			}
		}
	}
</style>
